<template>
  <view class="login">
    <view class="login_tit">
      <view class="">
        <h3>智慧校园</h3>
        <h5>学生照片录入系统</h5>
      </view>
    </view>
    <view class="login_box">
      <view class="login_box_form">
        <u-radio-group placement="row" v-model="form.identity" style="width: 60%;display: flex;justify-content: space-between;margin: 0 20%; margin-bottom: 16px;">
          <u-radio shape="square" name="student"><b>学生</b></u-radio>
          <u-radio shape="square" name="teacher"><b>教师</b></u-radio>
        </u-radio-group>
        <view class="login_box_form_item">
          <view class="login_box_form_item_tit">
            姓名
          </view>
          <u-input v-model="form.realname" type="text" height="90" :border="true" clearable/>
        </view>
        <view class="login_box_form_item">
          <view class="login_box_form_item_tit">
            {{ form.identity === 'student' ? '学籍号' : '手机号' }}
          </view>
          <u-input v-model="form.roll" type="number" height="90" :border="true" clearable/>
        </view>
        <view class="login_box_form_btn" @click="login">
          登录
        </view>
        <view
            class="agreement-box u-flex u-row-center u-col-top u-m-b-60">
          <u-checkbox v-model="protocol" shape="circle" active-color="#00BFFF">
            <view class="agreement-text tcp-text u-flex u-col-top u-flex-col">
              智慧校园
              <view class="tcp-text u-flex u-col-center">
                <view @tap.stop="jump('/pages/user/userxieyi')">
                  《用户协议》
                </view>
                与
                <view @tap.stop="jump('/pages/user/yinsi')">
                  《隐私协议》
                </view>
              </view>
            </view>
          </u-checkbox>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        realname: '',
        roll: '',
        identity: 'student'
      },
      protocol: false, //是否同意隐私协议
    }
  },
  methods: {
    // 路由跳转
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
    async login() {
      let that = this;
      if (!that.protocol) {
        that.$u.toast("请同意用户协议");
        return false;
      }
      that.$http('veriFace.login', {
                roll: that.form.roll,
                realname: that.form.realname,
				roletype: that.form.identity === 'teacher' ? 2 : 1
              },
              "登录中..."
          )
          .then(res => {
            console.log(res)
            if (res.code == 0) {
              uni.setStorageSync('token', res.data.access_token)
              uni.setStorageSync('roll', that.form.roll)
              uni.setStorageSync('realname', that.form.realname)
              uni.setStorageSync('identity', that.form.identity)
              that.$u.toast(res.msg);
              setTimeout(function () {
                uni.navigateTo({
                  url: that.form.identity === 'teacher' ? '/pages/veriFace/typeIn' : '/pages/veriFace/info'
                })
              }, 500)

            } else {
              that.$u.toast(res.msg);
            }
          });
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-image: url(@/static/images/veriFace/login_back.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &_tit {
    font-size: 48rpx;
    flex: .5;
    display: flex;
    flex-direction: column;
    justify-content: center;

    view {
      margin: auto;
    }
  }

  &_box {
    background: #F2F4FF;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    flex: 1;
    padding: 80rpx;
    box-sizing: border-box;


    .u-input--border {
      border: none !important;
      background: #fff;
      border-radius: 50px;
      padding: 0 40rpx !important;
      box-shadow: 0 0 1px rgba(54, 114, 250, .1)
    }

    .u-input__input {
      height: 80rpx;
    }

    &_form {
      &_item {
        margin-bottom: 30rpx;

        &_tit {
          margin-bottom: 20rpx;
          font-weight: bold;
          font-size: 30rpx;
        }
      }

      &_btn {
        margin-top: 100rpx;
        color: #FFFFFF;
        background: #1989F9;
        border-radius: 10px;
        padding: 20rpx 30rpx;
        font-size: 30rpx;
        text-align: center;
      }
    }
  }
}

.agreement-box {
  margin: 80rpx auto 0;

  .protocol-check {
    transform: scale(0.7);
  }

  .agreement-text {
    font-size: 24rpx;
    font-weight: 500;
    color: #999999;

    .tcp-text {
      color: #00BFFF;
    }
  }
}
</style>
